﻿<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>下班倒计时</title>

    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div class="clock">
      <div class="hour">
        <div class="hr" id="hr"></div>
      </div>

      <div class="min">
        <div class="mn" id="mn"></div>
      </div>

      <div class="sec">
        <div class="sc" id="sc"></div>
      </div>
    </div>

    <h1 class="timer">
      距离下班还有
      <span id="count">0s</span>
    </h1>

    <script type="text/javascript">
      const deg = 6;
      const hr = document.querySelector("#hr");
      const mn = document.querySelector("#mn");
      const sc = document.querySelector("#sc");
      const count = document.querySelector("#count");

      const yyyy = new Date().getFullYear();
      const MM = new Date().getMonth() + 1;
      const DD = new Date().getDate();
      const out = new Date(`${yyyy}/${MM}/${DD} 17:00`);

      setInterval(() => {
        let day = new Date();
        let hh = day.getHours() * 30;
        let mm = day.getMinutes() * deg;
        let ss = day.getSeconds() * deg;
        // const sc = out - day;

        hr.style.transform = `rotateZ(${hh + mm / 12}deg)`;
        mn.style.transform = `rotateZ(${mm}deg)`;
        sc.style.transform = `rotateZ(${ss}deg)`;

        let end = out.getTime() - day.getTime();
        if(end>0){
          count.innerHTML = getDuration(end);
        }else{
          end = end + 24 * 60 * 60 * 1000
          count.innerHTML = getDuration(end);
        }
      }, 1000);
       function getDuration(my_time) {
        const days = my_time / 1000 / 60 / 60 / 24;
        const daysRound = Math.floor(days);
        const hours = my_time / 1000 / 60 / 60 - 24 * daysRound;
        const hoursRound = Math.floor(hours);
        const minutes = my_time / 1000 / 60 - 24 * 60 * daysRound - 60 * hoursRound;
        const minutesRound = Math.floor(minutes);
        const seconds = my_time / 1000 - 24 * 60 * 60 * daysRound - 60 * 60 * hoursRound - 60 * minutesRound;
        return hoursRound + "时"+minutesRound + "分"+seconds.toFixed(0) + "秒"
      }

      function formatTime(time) {
        // alert(time)
        var days = parseInt(time / (1000 * 60 * 60 * 24));
        var hours = parseInt((time % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = parseInt((time % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((time % (1000 * 60)) / 1000);
      return `${hours}时${minutes}分${seconds}秒`

      }
    </script>
  </body>
</html>
